<template>
  <div style="background: #fff !important; height: 100%; padding: 16px">
    <div>
      <span style="margin-right: 20px">录入类弹窗表单带子表示例</span>
      <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
    </div>
    <demonstrationModal @register="registerModal"></demonstrationModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, computed, unref } from 'vue';
  import { useModal } from '/@/components/Modal';
  import demonstrationModal from './components/demonstrationModal.vue';
  //注册model
  const [registerModal, { openModal }] = useModal();
  /**
   * 新增事件
   */
  function handleAdd() {
    openModal(true, {
      isUpdate: false,
      showFooter: true,
    });
  }
</script>

<style lang="less" scoped>
  :deep(.ant-picker),
  :deep(.ant-input-number) {
    width: 100%;
  }
</style>
